import { sheZhi } from '../../../cunChu/bianLiang.js'

class SheZhi extends HTMLElement {
	cunDangXiang = null
	kuaiJieJianXiang = null

	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })
		
		let style = document.createElement('style')
		style.textContent = `
			button {
				cursor: pointer;
				color: #fff;
				background: rgba(0, 100, 200, 1);
				border: none;
				border-radius: 5px;
				padding: 5px 10px;
				margin-left: 10px;
				box-shadow: 1px 1px 0px 2px rgba(50, 100, 200, 0.5)
			}
			button:hover {
				filter: brightness(1.2);
			}
			button:focus-visible {
				outline: none;
			}
		`
		shadow.appendChild(style)
		// 标签
		let biaoQianYe = document.createElement('biao-qian-ye')

		shadow.appendChild(biaoQianYe)
		// 存档
		this.cunDangXiang = document.createElement('biao-qian-xiang')
		this.cunDangXiang.setAttribute('biao-ti', '存档')

		let cunDangAnNiu = document.createElement('button')
		cunDangAnNiu.textContent = '存档'
		cunDangAnNiu.setAttribute('slot', 'nei-rong')
		this.cunDangXiang.cunDangAnNiu = cunDangAnNiu

		let daoChuCunDangAnNiu = document.createElement('button')
		daoChuCunDangAnNiu.textContent = '导出存档'
		daoChuCunDangAnNiu.setAttribute('slot', 'nei-rong')
		daoChuCunDangAnNiu.style.background = 'rgba(0, 100, 200, 0.5)'
		this.cunDangXiang.daoChuCunDangAnNiu = daoChuCunDangAnNiu
		
		let shanChuCunDangAnNiu = document.createElement('button')
		shanChuCunDangAnNiu.textContent = '删除存档'
		shanChuCunDangAnNiu.setAttribute('slot', 'nei-rong')
		shanChuCunDangAnNiu.style.background = 'rgba(0, 100, 200, 0.2)'
		this.cunDangXiang.append(cunDangAnNiu, daoChuCunDangAnNiu, shanChuCunDangAnNiu)
		
		this.cunDangXiang.shanChuCunDangAnNiu = shanChuCunDangAnNiu
		biaoQianYe.append(this.cunDangXiang)
		// 快捷键
		this.kuaiJieJianXiang = document.createElement('biao-qian-xiang')
		this.kuaiJieJianXiang.setAttribute('biao-ti', '快捷键')
		biaoQianYe.append(this.kuaiJieJianXiang)
	}
	
	connectedCallback() {
		this.style = `
			color: #fff;
			display: block;
			width: 30rem;
			height: 30rem;
		`
	}
	// 更新快捷键
	gengXinKuaiJieJian() {
		this.kuaiJieJianXiang.innerHTML = ''

		let kjj = document.createElement('div');
		kjj.setAttribute('slot', 'nei-rong')

		let { kuaiJieJian } = sheZhi

		for (let i in kuaiJieJian) {
			if (!kuaiJieJian[i]) return

			let details = document.createElement('details');
			details.setAttribute('open', true)
			details.style.setProperty('font-size', '0.8rem')
			let summary = document.createElement('summary');
			summary.style.setProperty('outline', 'none')
			summary.style.setProperty('font-size', '1rem')
			summary.style.setProperty('margin', '0.5rem 0')
			summary.insertAdjacentText('beforeend', kuaiJieJian[i].miaoShu)
			details.appendChild(summary)
			for (let j of Object.values(kuaiJieJian[i])) {
				let div = document.createElement('div');
				div.style.setProperty('margin', '0.1rem 1rem')
				div.innerHTML = `${j.miaoShu}: ${j.kuaiJieJian}`
				details.appendChild(div)
			}
			kjj.appendChild(details)
		}
		
		this.kuaiJieJianXiang.appendChild(kjj)
		this.kuaiJieJianXiang.gengXinNeiRong()
	}
}

customElements.define('she-zhi', SheZhi)